<template>
	<div class="max">
		<my-header :backBtn="true">
			<div slot="title">
				宝宝请假
			</div>
		</my-header>
		<div class="tl cont-nof">
			<div class="weui-navbar">
				<div class="weui-navbar__item " :class="{'weui-bar__item_on':menu===0}" @click="menu=0">
					填写申请
				</div>
				<div class="weui-navbar__item" :class="{'weui-bar__item_on':menu===1}" @click="menuChange(1)">
					请假记录
				</div>
			</div>
			<div class="tl leave-list">
				<div v-if="menu==0" class="max" style="overflow: auto;">
					<div class="select_item oh flex">
						<span>
							请假人
						</span>
						<select v-model="postData.studentId">
							<option v-for="student in childrenList" :value="student.studentId">{{student.studentName}}</option>
						</select>
					</div>
					<div class="select_list oh">
						<div class="select_list_item flex">
							<span>
								请假原因
							</span>
							<div class="leave_type">
								<span class="db_inline tc" :class="{'active':postData.leaveType=='病假'}" @click="postData.leaveType='病假'">病假</span>
								<span class="db_inline tc" :class="{'active':postData.leaveType=='事假'}" @click="postData.leaveType='事假'">事假</span>
							</div>
						</div>
						<div class="select_list_item flex">
							<span>
								开始时间
							</span>
							<input type="datetime-local" v-model="postData.startTime">
						</div>
						<div class="select_list_item flex">
							<span>
								结束时间
							</span>
							<input type="datetime-local" v-model="postData.endTime">
						</div>
						<div class="select_list_item flex">
							<span>
								请假时长
							</span>
							<div>
								{{total}}天
							</div>
						</div>
					</div>
					<div class="select_item_text oh">
						<contenteditable @input="getValue" :placeholder="'情况说明'" :styles="{padding:0,lineHeight:'2rem',fontSize:'1.6rem',textAlign:'justify'}"></contenteditable>
						<upload-file ref="upload" :type="'image'" :max="1"></upload-file>
					</div>
					<div class="submitBtn" @click="submit">
						提交
					</div>
				</div>
				<div class="weui-panel__bd" v-else>
					<div class="weui-loadmore weui-loadmore_line" v-if="list.length===0">
						<span class="weui-loadmore__tips">暂无数据</span>
					</div>
					<div class="weui-panel weui-panel_access">
						<div class="weui-panel__bd">
							<div class="weui-media-box weui-media-box_text" v-for="item in list">
								<router-link :to="{path: '/leaveDetails',query:item}">
									<h4 class="weui-media-box__title">{{item.studentName}}</h4>
									<p class="weui-media-box__desc">请假时间：{{item.createTime}}</p>
								</router-link>
							</div>
						</div>
						<div class="weui-panel__ft" @click="loadMore" v-if="params.current<params.pages">
							<a href="javascript:void(0);" class="weui-cell weui-cell_access weui-cell_link">
								<div class="weui-cell__bd">查看更多</div>
								<span class="weui-cell__ft"></span>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import mySelect from '@/components/select.vue'
	import PullTo from 'vue-pull-to';
	import myFoot from '@/components/Footer.vue'
	import contenteditable from '@/components/contenteditable.vue';
	import uploadFile from '@/components/uploadFile.vue';

	export default {
		components: {
			PullTo,
			mySelect,
			myFoot,
			contenteditable,
			uploadFile
		},
		data() {
			let time = this.$getNowDate('dateTime');
			let next = new Date(time).getTime() + 86400000;
			let nextTime = this.$getNowDate('dateTime', next);
			return {
				params: {
					current: 1,
					size: 10,
					pages: 0,
					total: 0
				},
				typeList: [{
						name: '事假',
						value: '事假'
					},
					{
						name: '病假',
						value: '病假'
					},
					{
						name: '其他',
						value: '其他'
					},
				],
				childrenList: [],
				postData: {
					studentId: '',
					startTime: time,
					endTime: nextTime,
					total: 0,
					leaveType: '事假',
					reason: '', //离园原因
					imgList: [],
				},
				menu: 0,
				list: [],
			}
		},
		computed: {
			total() {
				let start = new Date(this.postData.startTime).getTime();
				let end = new Date(this.postData.endTime).getTime();
				let day = Number(((end - start) / 86400000).toFixed(1));
				if (day < 0) {
					day = 1;
					let next = new Date(this.postData.startTime).getTime() + 86400000;
					this.postData.endTime = this.$getNowDate('dateTime', next);
					this.$weui.topTips('结束时间不能早于开始时间');
				}
				if (!end || !start) day = 0;
				return day
			}
		},
		methods: {
			getValue(val) {
				this.postData.reason = val;
			},
			menuChange(index) {
				this.menu = index;
				this.fetchStuLeave();
			},
			loadMore() {
				this.params.size += 10;
				this.fetchStuLeave();
			},
			fetchStuLeave() {
				this.$http.fetchStuLeave(this.params).then(resp => {
					let data = resp.data;
					this.list = data.records;
					Object.assign(this.params, {
						current: data.current,
						size: data.size,
						pages: data.pages,
						total: data.total
					})
				})
			},
			submit() {
				this.postData.total = this.total;
				this.postData.imgList = this.$refs.upload.getUpList();
				if (this.postData.studentId.length === 0) {
					this.$weui.topTips('选择请假宝贝');
					return;
				}
				if (!this.postData.startTime) {
					this.$weui.topTips('开始时间必填');
					return;
				}
				if (!this.postData.endTime) {
					this.$weui.topTips('结束时间必填');
					return;
				}
				if (!this.postData.reason) {
					this.$weui.topTips('请输入请假原因');
					return;
				}
				this.$http.createStuLeave(this.postData).then(resp => {
					this.$weui.toast('请假已通知园方');
					let time = this.$getNowDate('dateTime');
					let next = new Date(time).getTime() + 86400000;
					let nextTime = this.$getNowDate('dateTime', next);
					Object.assign(this.postData, {
						startTime: time,
						endTime: nextTime,
						reason: '',
						total: 1,
						imgList: [],
					});
					this.menu = 1;
					this.fetchStuLeave();
				})
			},
			fetchMyStudent() {
				this.$http.fetchMyStudent().then(resp => {
					this.childrenList = resp.data.students;
					if (this.childrenList.length === 1) {
						this.postData.studentId = this.childrenList[0].studentId;
					}
				})
			}
		},
		mounted() {
			this.fetchMyStudent();
		},
		created() {
			if (this.$Cookies.get('from') == '/leaveDetails') {
				this.menu = 1;
				this.fetchStuLeave();
			}
		}
	}
</script>

<style scoped>
	.leave-list {
		height: calc(100% - 5.6rem);
		overflow: auto;
	}

	.submitBtn {
		width: 14rem;
		height: 3.5rem;
		line-height: 3.5rem;
		margin: 2rem auto;
		border-radius: 60px;
		background-color: rgba(54, 193, 45, 1);
		color: #FFFFFF;
		text-align: center;
		font-size: 2rem;
	}

	.select_item,
	.select_list,
	.select_item_text {
		width: calc(100% - 2rem);
		height: 5.4rem;
		line-height: 5.4rem;
		margin: 1rem auto;
		background: #FFFFFF;
		border-radius: 6px;
		font-size: 1.6rem;
		padding: 0 1rem;
		box-sizing: border-box;
		justify-content: space-between;
	}

	.select_list,
	.select_item_text {
		height: auto;
	}

	.select_item_text {
		padding: 1rem;
	}

	.select_item select,
	.select_item input,
	.select_list_item input,
	.select_list_item select {
		height: 100%;
		font-size: 1.6rem;
		border: none;
		color: rgba(16, 16, 16, 1);
		outline: none;
	}

	.select_list_item {
		width: 100%;
		height: 100%;
		border-bottom: 1px solid rgba(238, 238, 238, 1);
		justify-content: space-between;
	}

	.select_list_item:last-child {
		border: 0;
	}

	.leave_type span {
		height: 2rem;
		width: 5rem;
		line-height: 2rem;
		background-color: rgba(238, 238, 238, 1);
		color: rgba(123, 123, 123, 1);
		font-size: 1.2rem;
		border-radius: 4px;
		margin-left: 1rem;
	}

	.leave_type span.active {
		background-color: rgba(54, 193, 45, 1);
		color: rgba(255, 255, 255, 1);
	}

	.required {
		position: relative;
	}

	.required::after {
		content: '*';
		position: absolute;
		color: red;
		left: 0rem;
	}
</style>
